<template>
    <div class="container">
        <div class="search-content">
        <el-form :model="searchContent" ref="searchFrom" :inline="true">
            <el-form-item prop="store_name" label="入录时间：">
                <el-date-picker
                    v-model="searchContent.groupTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handleChangeTime">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="mobile" label="客户手机：">
                <el-input v-model="searchContent.mobile" placeholder="客户手机" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight" 
                :header-cell-class-name="hdCellClassName" 
                :default-sort="{prop: 'id'}"
            >
                <el-table-column 
                  type="index" 
                  label="序号"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  label="用户手机"
                  min-width="150"
                  align="center"
                  prop="mobile"
                >
                </el-table-column>
                <el-table-column 
                  label="新增时间"
                  min-width="120"
                  align="center"
                  prop="create_time"
                >
                </el-table-column>
                <el-table-column 
                  label="最后登录时间"
                  min-width="120"
                  align="center"
                  prop="last_login"
                >
                </el-table-column>
                <el-table-column 
                  label="绑定车型"
                  min-width="150"
                  align="center"
                  prop="brand_name" 
                >
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group">
				<el-button type="primary" @click="getData('export')">导出</el-button>
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import { dateFormatter } from '@/common/js/util.js';
import Qs from 'qs';
export default {
    data() {
        return {
            searchContent: {
				mobile: '',           // 客户手机
                begin_date: '',       // 开始时间
                end_date: '',         // 结束时间 
                is_search: false      // 是否处于搜索
            },
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 20,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
            oHeight: 600,             // 默认高度, 其值会在mounted中的resize进行重新计算
        }
    },
    methods: {
        handleChangeTime(val) {
            if(val) {
                this.searchContent.begin_date = val[0];
                this.searchContent.end_date = val[1];
            } else {
                this.searchContent.begin_date = null;
                this.searchContent.end_date = null;
            }
        },
        hdCellClassName() {
            return 'hdCellStyle'
        },
        async getData(action = null) {
            let datas = {
                pageSize: this.pageArr.pageSize,
                page: this.pageArr.curpage,
                is_list: 1,        // 来源列表
            }
            if(this.searchContent.is_search) {
                datas = {...datas, ...this.searchContent};
            }
            if(action == "export") {
                datas.is_export = 1;
                let domain = document.domain;
				if (domain != 'admin.mycjj.com' && domain != 'admin.chejj.cn') {
					domain = 'admin.chejj.cn'
				}
				const url = location.protocol + '//' + domain.replace('admin', 'api') + '/admin/yt_car/index.php?act=statistic&op=getMiniNewUser&' + Qs.stringify(datas);
                window.open(url)
                // window.location.href = url
            } else {
                this.$http.get('/admin/yt_car/index.php?act=statistic&op=getMiniNewUser', {params: datas}).then(res => {
                    // console.log(res)
                    if(res.code == 1) {
                        this.dataList = this.fieldFilter(res.data.list, [
                            "member_id", "mobile", "member_login_time", "member_time", 
                            "brand_name", "last_login", "create_time"
                        ]);
                        this.pageArr.total = parseInt(res.data.totalCount)
                    }
                })
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        fieldFilter(data, field) {
            if(!data) return [];
            return data.map((item, key) => {
                let obj = {};
                field.map(item2 => {
                    if(item[item2]) {
                        obj[item2] = item[item2]
                    }
                })
                return obj;
            })
        },
        handleSearch() {
            if(!this.searchContent.is_search) this.searchContent.is_search = true;
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleReset() {
            this.selectTime = null;
            this.$refs.searchFrom.resetFields();
            if(!this.searchContent.is_search) return;
            this.searchContent = {
                is_search: false
            }
            this.pageArr.curpage = 1;
            this.getData();
        },
    },
    created() {
        this.$parent.showButton = false;
        if(this.$route.query.begin) {
            /*
            this.$route.query.begin = "2018-01-02"
            this.$route.query.end = dateFormatter("yyyy-MM-DD")
            this.searchContent.begin_date = this.$route.query.begin
            this.searchContent.end_date = this.$route.query.end
            this.searchContent.groupTime = [this.$route.query.begin, this.$route.query.end]
            this.searchContent.is_search = true;
            */
        } 
        this.getData()
    },
	mounted() {
		resize(this)
	},
    beforeCreate() {
        if(!this.$parent.tabLists.find(item => item.name == "registryAccessDetails")) {
            this.$parent.tabLists.push({
                label: "注册人数详情", name: "registryAccessDetails"
            })
        }
    },
    beforeRouteLeave (to, from, next) {
        this.$parent.tabLists = this.$parent.tabLists.filter(item => item.name != "registryAccessDetails")
        next()
    }
}
</script>
<style lang="scss" scoped>
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
